<script setup lang="ts">
import SonSon from './Son-son.vue'
import { inject } from 'vue'
interface Person {
  name: string
  age: number
}
// 父传子
defineProps<Person>()

// 子传父
// const emits = defineEmits<{
//   // 参数1：回调函数名称
//   // 参数n：需要回传的数据和类型
//   (e: 'my-event', age: number): void
// }>()

// Vue3.3+ 更一种更简洁的语法
const emits = defineEmits<{
  'my-event': [age: number]
  'getName': [name: string]
}>()

const money = inject<number>('totalMoney')

</script>
<template>
  <div class="son">
    Son：{{ name }}-{{ age }}
    <div>
      <button @click="emits('my-event', age)">点击触发事件</button>
      <button @click="emits('getName', name)">点击获取Name</button>
      <div>{{ money }}</div>
      <div><Son-son /></div>
    </div>
  </div>
</template>
<style scoped>
.son {
  background-color: rgb(0, 223, 111);
  height: 2vw;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 20vw;
  height: 20vw;
  color: #fff;
  font-size: 40px;
}
</style>